<template>
    <div id="grade_line_main">
        <el-select v-model="timeId" placeholder="请选择" :change="getGrade()">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <div id="grade_line">
        </div>
    </div>
</template>

<script>
import { getGrade } from '@/utils/urlManager';
import axios from 'axios';
import * as echarts from 'echarts';
import '@/utils/InterceptorUtils';
export default {
    // props: ["course_data"],
    data() {
        return {
            course_data: this.gradeData,
            grade_data: [],
            color: "rgba(255, 0, 0, " + 0 + ")",
            options: [{
                value: 1,
                label: "第一学期"
            }, {
                value: 2,
                label: "第二学期"
            }, {
                value: 3,
                label: "第三学期"
            }, {
                value: 4,
                label: "第四学期"
            }, {
                value: 5,
                label: "第五学期"
            },{
                value:6,
                label: "第六学期"
            }],
            timeId: 1
        }

    },
    mounted() {
        this.getGrade();

    },
    methods: {

        getGrade() {
            if (this.timeId >= 1 && this.timeId < 7) {
                axios.get(getGrade, {
                    params: {
                        id: this.timeId // 将学生 ID 作为查询参数传递
                    }
                })
                    .then((response) => {
                        const res = response.data
                        if (res != null && res.code == 1) {
                            this.course_data = null;
                            this.course_data = res.data
                            this.grade_chart();
                        }
                    })
                    .catch((err) => {
                        console.error(err);
                    })
            }else{
                this.$message.error("获取信息失败！！")
            }
        },

        grade_chart() {
            var chartDom = document.getElementById('grade_line');
            var myChart = echarts.init(chartDom);
            var option;
            const grade_values = this.course_data.map(item => item.grade);
            const averageGrade = this.calculateAverage(grade_values);
            if (averageGrade < 60) {
                this.color = "rgba(255, 0, 0, " + 1 + ")"
            } else if (averageGrade > 90) {
                this.color = "rgba(0, 255, 0, " + 1 + ")"
            }else{
                this.color = "rgba(255, 255, 255, " + 1 + ")"
            }
            const pre_indicator = this.course_data.map(item => ({
                text: item.subjectName,
                max: 100,
                color: 'black'
            }));
            option = {
                color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C', '#111'],
                tooltip: {
                    trigger: 'item',
                },
                title: {
                    text: "平均分：" + averageGrade.toFixed(2)
                },
                radar: [
                    {
                        indicator: pre_indicator,
                        center: ['50%', '50%'],
                        radius: 100,
                        startAngle: 90,
                        splitNumber: 4,
                        shape: 'circle',
                        splitArea: {
                            areaStyle: {
                                color: ['#529BE4'],
                                // 背景颜色
                                shadowColor: this.color,
                                shadowBlur: 100
                            }
                        },
                        axisName: { // 配置轴名称的样式
                            textStyle: {
                                color: '#333', // 轴名称的颜色
                                fontSize: 50 // 轴名称的字体大小
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'radar',
                        data: [
                            {
                                value: grade_values
                            }
                        ],
                        areaStyle: { // 配置填充样式
                            color: 'rgba(255, 0, 255, 1)', // 填充颜色，可自定义
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

        },
        calculateAverage(grades) {
            if (!grades || grades.length === 0) {
                console.warn('%c No grades to calculate average', 'color: red; font-weight: bold; background-color: yellow;');
                return 0;
            }

            const sum = grades.reduce((acc, grade) => acc + grade, 0);
            return sum / grades.length;
        }
    }
}
</script>

<style scoped>
#grade_line {
    width: 100%;
    height: 90%;
}

#grade_line_main {
    width: 100%;
    height: 100%;
}
</style>